[React] 画面タッチによるピンチズーム操作を無効にする

#React

#JavaScript

若槻龍太

2021.09.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 IoT事業部の若槻です。

Reactで実装したWebアプリケーションで、スマートフォンやタブレットで使われた場合に、画面タッチによるピンチズーム（ピンチイン/ピンチアウト）の操作を行わせたくないという要件がありました。

ピンチズームのジェスチャー - Web API | MDN

今回は、Reactアプリケーションで画面タッチによるピンチズーム操作を無効にする方法を確認してみました。

確認した端末、ブラウザ

検証は下記の端末、ブラウザで行いました。

Androidスマートフォン
- Google Chrome
Windowsタブレット
- Google Chrome
- Microsoft Edge
- Firefox

ピンチズームを無効にできた実装

下記の実装の場合はいずれの端末、ブラウザでもピンチズームが無効化されました。

const touchHandler = (event: any) => {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
};
document.addEventListener('touchstart', touchHandler, {
  passive: false
});

タッチイベントタイプのtouchstartのうち2点以上のタッチによるアクションをpreventDefault()により無効化しています。

TouchEvent - Web APIs | MDN

検証に使用したCodeSandboxの環境。

https://pwsht.csb.app/

ピンチズームを無効にできなかった実装

下記の実装の場合はいずれの端末、ブラウザでもピンチズームが無効化されませんでした。

user-scalable=no

Metaタグでcontent="user-scalable=no"を指定してもピンチズームは可能なままでした。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" content="user-scalable=no" />

検証に使用したCodeSandbox環境。

https://zfxdc.csb.app/

touch-action: none

.App {
  touch-action: none;
}

CSSスタイルでtouch-action: noneを指定することによりジェスチャーを無効にできるとのことですが、上手く動作しませんでした。

none
ブラウザーがすべてのパンやズームのジェスチャーを扱うことを無効にします。

touch-action - CSS: カスケーディングスタイルシート | MDN

検証に使用したCodeSandbox環境。

https://sp26h.csb.app/

touch-action: manipulation

.App {
  touch-action: manipulation;
}

下記で紹介されていた方法でしたが、上手く動作しませんでした。

iOS10のSafariでuser-scalable=no が効かなくズームがされる問題への対策 - Qiita

MDNのドキュメントを読む限りは通常のピンチズーム操作は無効にでき無さそうです。

manipulation
パンおよびズームのジェスチャーは有効にしますが、ダブルタップでのズームなど、標準外の追加的なジェスチャーを無効します。ダブルタップでズームすることを無効にすることで、ユーザーが画面をタップしたとき、ブラウザーがクリックイベントの生成を待つ必要がなくなります。これは "pan-x pan-y pinch-zoom" の別名です (互換性のために、これも有効です)。

検証に使用したCodeSandbox環境。